<template>
    <div class="toggle-type">
        <div class="toggle-type-item" :class="{ 'toggle-type-active': toggleType == 0 }" @click="selectToggleType(0)">
            商品素材
        </div>
        <div
            class="toggle-type-item"
            :class="{
                'toggle-type-active': toggleType == 1,
                'toggle-type-disable': props.isGoodsOnly
            }"
            @click="selectToggleType(1)">
            页面素材
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, withDefaults } from 'vue';

interface Props {
    /** 类型 */
    modelValue: number | string;
    /** 是否只有商品素材 */
    isGoodsOnly: boolean;
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: 0,
    isGoodsOnl: false
});

const toggleType = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const selectToggleType = (type?: any) => {
    if (props.isGoodsOnly) return;
    toggleType.value = type;
};

const emit = defineEmits(['update:modelValue']);
</script>
<style lang="scss" scoped>
.toggle-type {
    display: flex;
    align-items: center;
    margin: 8px 0 16px;

    .toggle-type-item {
        margin-right: 12px;
        padding: 8px 12px;
        line-height: 1;
        background-color: #eee;
        border-radius: 6px;
        color: #666;
        font-weight: 600;

        &:hover {
            cursor: pointer;
            background-color: #fff1ed;
            color: #ff6b00;
        }
    }

    .toggle-type-active {
        background-color: #fff1ed;
        color: #ff6b00;
    }

    .toggle-type-disable:hover {
        cursor: not-allowed;
        background-color: #eee;
        color: #666;
    }
}
</style>
